<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <div class="description">
      <div class="table-container">
        <div class="operator-node-edit-title">自定义算子用法：</div>
        <div
          v-for="(line, index) in operatorScript"
          :key="index"
          class="operator-node-edit-preview"
          :class="{ 'comment-style': line.trim().startsWith('#') }"
        >
          {{ line }} &nbsp;
        </div>
      </div>
    </div>
    <div class="footer-buttons">
      <div class="btn import-btn" @click="openEditOperator()">编辑算子</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Watch } from 'vue-property-decorator'
import Component from 'vue-class-component'
import DataStore from '@/store/modules/dataview'
import { queryNotebook } from '@/api/edit-operator'

@Component
export default class OperatorNode extends Vue {
  public get isLock() {
    return DataStore.getLock
  }

  public get isVisitor() {
    return DataStore.isVisitor
  }

  /**
   * 算子预览信息
   */
  private operatorScript: Array<string> = []

  private get selectNode() {
    return DataStore.selectNode
  }

  /**
   * 获取算子预览信息
   */
  async mounted() {
    if (this.isLock || this.isVisitor) {
      return
    }

    this.operatorScript = []
    const response = await queryNotebook({
      data: {
        id: this.selectNode.operatorId,
      },
    })

    const paras = JSON.parse(response.data.result.scriptBody).paragraphs
    paras.forEach((para: any) => {
      this.operatorScript = this.operatorScript.concat(para.text.split('\n'))
    })
  }

  /**
   * 监听 selectNode 变化
   * 更新算子预览信息
   */
  @Watch('selectNode', { deep: true })
  private async handleSelectNodeChange() {
    if (this.isLock || this.isVisitor) {
      return
    }

    this.operatorScript = []
    const response = await queryNotebook({
      data: {
        id: this.selectNode.operatorId,
      },
    })

    const paras = JSON.parse(response.data.result.scriptBody).paragraphs
    paras.forEach((para: any) => {
      this.operatorScript = this.operatorScript.concat(para.text.split('\n'))
    })
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.$emit('cancel')
  }

  /**
   * 打开编辑算子页面
   */
  public async openEditOperator() {
    DataStore.setEditOperatorParam({
      operatorId: this.selectNode.operatorId,
      taskId: this.selectNode.id,
      type: this.selectNode.type,
    })
    DataStore.setEditOperatorNode(this.selectNode)
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

.operator-node-edit-title {
  color: #14a577;
  font-size: 12px;
  letter-spacing: 0.86px;
  margin-bottom: 10px;
  max-width: 100%;
}

.operator-node-edit-preview.comment-style {
  color: #14a577;
}

.operator-node-edit-preview {
  color: #5d637e;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.86px;
  line-height: 18px;
  margin: 4px 0;
  max-width: 100%;
}
</style>
